<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            height: 2000px;
        }
        .b1{
            width: 100px;
            height: 100px;
            padding:20px;
            border:10px solid red;
            /* 盒子的大小=width*height */
            box-sizing: border-box;
        }
        .b2{
            width: 100px;
            height: 100px;
            padding:20px;
            border:10px solid red;
            /* 盒子的大小 (witdth+padding+border) * (height + padding + border) */
            box-sizing: content-box;
        }
        .b3{
            width: 300px;
            /* height: 500px; */
            background-color: rgb(243, 240, 240);
            /* padding-left:10px;
            padding-top:30px;
            padding-bottom: 50px;
            padding-right: 50px; */
            /* 上右下左 */
            /* padding: 10px 20px 30px 40px; */
            /* 上（左右）下 */
            /* padding:10px 20px 30px; */
            /* (上下)(左右) */
            /* padding:10px 20px */
            padding:20px;

        }
        .b4{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            /* margin:10px; */
            /* margin:10px 20px 30px 40px; */
            margin:10px 20px 30px;
            
        }
        .b5{
            width: 100px;
            height: 100px;
            /* 设置所有方位的边框以及类型 */
            /* border: 1px dashed red; */
            /* border-width: 1px;
            border-style: dashed;
            border-color: red; */
            border-top:1px solid red;
            border-left:5px dashed green;
            border-right-width:10px ;
            border-right-style:double ;
            /* border */
            /* border-方向 */
            /* border-方向-类型 */
            
        }
        .b6{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 把盒子变成原型 */
            /* border-radius: 50%; */
            /* border-radius: 10px 20px; */
            /* 设置左上角的边框弧度 */
            border-top-left-radius:30px;
            /* 设置右下的边框弧度 */
            border-bottom-right-radius:30px ;
            /* 设置左下角的弧度的长短轴 */
            border-bottom-left-radius: 10px 20px;
            background-color: rgb(226, 240, 178);
        }
        input{
            border: 1px solid black;
            width: 200px;
            height: 60px;
            border-radius: 5px;
            /* input在输入的情况下会出现外轮廓，取消外轮廓 */
            outline: none;
        }
        /* 一个公共类，所有元素加上此类都会被变成圆形 */
        .circle{
            border-radius: 50%;
        }
        
    </style>
</head>
<body>
    <div class="b1 circle"></div>
    <div class="b2 circle"></div>
    <div class="b3 circle">
        <!-- <img src="http://b.hiphotos.baidu.com/image/h%3D300/sign=ad628627aacc7cd9e52d32d909032104/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg" alt=""> -->
        一方面为为了兼容IE浏览器，另一方面是IE的盒子模型在实际的布局中的确更容易控制。所以我们在实际的开发工作中，都是将标准的盒子模型转换为IE的盒子模型。转换方式如下
    </div>
    <div class="b4">
        这个盒子是b4 一方面为为了兼容IE浏览器，另一方面
    </div>
    <div class="b5">
        设置边框
    </div>
    <div class="b6"></div>
    <input type="text">
</body>
</html>